<template>
	<!-- <view class="page" style="background: url('../../static/Index/a.png') no-repeat;background-size: 100% 100%;"> -->
	<view class="page"
		style="background: url('http://175.178.150.60:97/static/img/a.520bd6a.png') no-repeat;background-size: 100% 100%;">
		<!-- <view class="page"> -->
		<view class="TopTabberDiv">
			<view class="TopTabber">
				<view class="TopTabberLeftDiv">
					<hpy-form-select :dataList="MenDianList" text="text" name="value" v-model="SelectMenDian"
						@change="change" />
				</view>
				<view class="TopCenterDiv">
					 {{ ourApi ?"云值守":"桔刻云值守"}}
<!-- 					云值守 -->
				</view>
			</view>
		</view>


		<view class="TopYinYe">
			<view class="TopDiv">
				<view class="TopLeftDiv" @click="toOrder">
					<view class="Num">{{TodayOrder}}</view>
					<view class="TopTitle">今日订单</view>
				</view>
				<view class="Xian"></view>
				<view class="TopLeftDiv" @click="toXiaoLiang">
					<!--  上：greenyellow，下：red -->
					<view class="Num"
						:style="ToDayMoney.turnover-YesDayMoney.turnover>=0?'color: greenyellow;':'color: red;'">
						￥{{ToDayMoney.turnover}}
						<view class="JianTou">
							{{ToDayMoney.turnover-YesDayMoney.turnover>=0? '↑':'↓'}}
						</view>
					</view>
					<view class="TopTitle">今日营业额</view>
					<view class="TopLiRun"
						:style="ToDayMoney.profit-YesDayMoney.profit>=0?'color: greenyellow;':'color: red;'">
						利润￥{{ToDayMoney.profit}}
						{{ToDayMoney.profit-YesDayMoney.profit>=0? '↑':'↓'}}
					</view>
					<view class="TopLiRun2"
						:style="ToDayMoney.totalNum-YesDayMoney.totalNum>=0?'color: greenyellow;':'color: red;'">
						数量{{ToDayMoney.totalNum}}
					</view>
				</view>
				<view class="Xian"></view>
				<view class="TopLeftDiv" @click="toXiaoLiang">
					<view class="Num">￥{{YesDayMoney.turnover}}
					</view>
					<view class="TopTitle">昨日营业额</view>
					<view class="TopLiRun">利润￥{{YesDayMoney.profit}}</view>
					<view class="TopLiRun2">数量{{YesDayMoney.totalNum}}</view>
				</view>
			</view>
		</view>

		<view class="CenterView">

			<view class="CenterIndexView">
				<!-- 				<view class="ListTitle">
					快捷功能
				</view> -->
				<view class="lists">
					<view class="list" @click="toOrder" v-if="Permission.orderPermissions==1">
						<image src="../../static/icons/order.svg"></image>
						<view class="text">订单</view>
						<!-- <image src="../../static/icons/JianTou.svg"></image> -->
					</view>
					<view class="list" @click="toShopping" v-if="Permission.merchandiseLibrary==1">
						<image src="../../static/icons/Shopping.svg"></image>
						<view class="text">商品库</view>
						<!-- <image src="../../static/icons/JianTou.svg"></image> -->
					</view>
					<view class="list" @click="towallet" v-if="Permission.renewalPermissions==1">
						<image src="../../static/icons/XuFei.svg"></image>
						<view class="text">续费</view>
						<!-- <image src="../../static/icons/JianTou.svg"></image> -->
					</view>
					<view class="list" @click="toBaoJin" v-if="Permission.inventoryAlarm==1">
						<image src="/static/icons/BaoJing.png" style="width: 12vw;"></image>
						<view class="text">库存报警</view>
						<!-- <image src="../../static/icons/JianTou.svg"></image> -->
					</view>
					<view class="list" @click="toMonitorList" v-if="Permission.monitorIndex==1">
						<image src="/static/icons/Monitor.svg" style="width: 12vw;"></image>
						<view class="text">监控查看</view>
					</view>
				</view>
			</view>

		</view>
		<view-tabbar tabIndex=0></view-tabbar>

	</view>
</template>

<script>
	import index from "./index.js";
	export default index;
</script>

<style>
	@import url("./index.css");

	.TopLiRun {
		margin-top: 20rpx;
		display: flex;
		color: #fff;
	}

	.TopLiRun2 {
		font-size: 22rpx;
		margin-top: 10rpx;
		color: #fff;
	}

	.JianTou {
		margin-left: 10rpx;
	}

	.TopTabberDiv {
		display: flex;
		align-items: flex-end;
		/* padding-top: 1vh; */

		height: 10vh;
		/* height: 162rpx; */
	}

	.TopLeftDiv {
		/* width: 22vw; */
		/* background: white; */
		border-radius: 5px;
		height: 14vh;
		width: 23vw;
		display: flex;
		align-items: center;
		flex-direction: column;
		justify-content: center;
		/* 		border: rgba(227, 227, 227, 1) solid 2rpx;
		box-shadow: 2px 0px 9px 0px grey; */
	}

	.TopTabberLeftDiv {
		min-width: 21vw;
		margin-left: 3vw;
	}

	.uni-popup__wrapper {
		background: none !important;
	}

	.select-picker {
		display: flex;
		align-items: center;
	}

	.placeholder {
		color: white !important;
		font-size: 0.9rem;
	}

	.select-picker-arrow {
		border-left: 1px solid #fff !important;
		border-bottom: 1px solid #fff !important;
	}

	.select-picker-border {
		border: 0 !important;
	}

	.select-picker-arrow-area {
		position: relative;
		bottom: 0.3vh;
	}

	.TopTabber {
		display: flex;
		justify-content: space-between;
		align-items: center;
		min-width: 56vw;
		color: white;
	}

	.TopCenterDiv {
		font-size: 1rem;
	}
</style>